﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dreamer Blog - 后台管理系统</title> 
    <!-- bootstrap 3.0.2 -->
    <link href="/resource/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- font Awesome -->
    <link href="/resource/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Ionicons -->
    <link href="/resource/css/ionicons.min.css" rel="stylesheet" type="text/css" />
    <!-- iCheck for checkboxes and radio inputs -->
    <link href="/resource/css/iCheck/all.css" rel="stylesheet" type="text/css" />
    <!-- Theme style -->
    <link href="/resource/css/style.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="/resource/js/jQueryMessage/css/message.skin.css" />
</head>

<body>
<div class="row">
    <div class="col-md-12">
    	<h1 class="panel-heading">分配角色</h1>
        <!--breadcrumbs start -->
        <ul class="breadcrumb">
			<li><a href="/admin/dashboard/toIndex"><i class="fa fa-home"></i> 首页</a></li>
			<li class="active">分配角色</li>
		</ul>
        <!--breadcrumbs end -->
    </div>
</div>
<div class="row">
	<div class="col-lg-12">
		<section class="panel">
			<div class="panel-body">
                 <b>当前用户：<span th:text="${user.username}"></span></b>
            </div>
		    <div class="panel-body">
		        <form class="col s12" id="form1" th:action="@{/admin/user/grant}" method="post">
		        	<input type="hidden" th:value="${user.id}" id="userId" name="userId"/>
		        	<div class="form-group" th:each="item : ${roles}">
						<input th:id="${item.id}" class="flat-grey list-child" name="roles" type="checkbox" th:value="${item.id}" th:checked="${item.checked}"/> <span th:text="${item.roleName}"></span>
		            </div>
		            <div class="form-btn-group-left">
		            	<button type="submit" class="btn btn-info" id="save">分配角色</button>
		            </div>
		        </form>
		    </div>
		</section>
	</div>
</div>
<!-- jQuery 2.0.2 -->
<script src="/resource/js/jquery.min.js" type="text/javascript"></script>
<!-- iCheck -->
<script src="/resource/js/plugins/iCheck/icheck.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/resource/js/jQueryMessage/js/jquery.plugin.message.js"></script>
<script type="text/javascript">
window.onload = function(){
	renderCheckBox();
}

function renderCheckBox(){
	$('input').on('ifChecked', function(event) {
	    $(this).parents('li').addClass("task-done");
	    console.log('ok');
	});
	$('input').on('ifUnchecked', function(event) {
	    $(this).parents('li').removeClass("task-done");
	    console.log('not');
	});
	
	$('input[type="checkbox"].flat-grey, input[type="radio"].flat-grey').iCheck({
	    checkboxClass: 'icheckbox_flat-grey',
	    radioClass: 'iradio_flat-grey'
	});
}
</script>			
</body>
</html>
